<template>
    <div class="map">
        <div class="map-head">
            <van-icon name="arrow-left" @click="()=>{this.$router.go(-1)}" />
            <h3>地图找房</h3>
            <span></span>
        </div>
        <div class="msp-main" id="container"></div>
    </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data () {
    return {

    }
  },
  computed: {
    ...mapState(['city'])
  },
  mounted () {
    this.map()
  },
  methods: {
    map () {
      var map = new window.BMapGL.Map('container') // 创建Map实例
      map.centerAndZoom(this.city + '市', 12) // 初始化地图,设置中心点坐标和地图级别
      map.enableScrollWheelZoom(true) // 开启鼠标滚轮缩放
    }
  }
}
</script>

<style lang="scss" scoped>
.map{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.map-head{
    width: 100%;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
}
.map-main{
    width: 100%;
    flex: 1;
}
#container {
    overflow: hidden;
    width: 100%;
    flex: 1;
    margin: 0;
    font-family: "微软雅黑";
}
</style>
